<route lang="json5">
{
  path: '/',
  meta: {
    title: '首页',
    layout: 'pc-default',
    showBreadcrumb: false,
  },
}
</route>

<template>
  <div class="home-page">
    <!-- Hero Section -->
    <section class="hero-section">
      <div class="container-box">
        <div class="hero-content">
          <div class="hero-text">
            <h1 class="hero-title">山东滨建工程技术服务</h1>
            <p class="hero-subtitle">专业的建筑工程技术服务提供商</p>
            <p class="hero-description">
              致力于为客户提供优质的工程咨询、技术培训和认证服务， 助力建筑行业健康发展。
            </p>
            <div class="hero-actions">
              <el-button type="primary" size="large" @click="router.push('/about')">
                了解更多
              </el-button>
              <el-button size="large" @click="router.push('/contact')"> 联系我们 </el-button>
            </div>
          </div>
          <div class="hero-image">
            <el-image src="/src/assets/images/hero-building.png" alt="建筑工程" fit="cover" lazy />
          </div>
        </div>
      </div>
    </section>

    <!-- Services Section -->
    <section class="services-section">
      <div class="container-box">
        <div class="section-header">
          <h2 class="section-title">我们的服务</h2>
          <p class="section-subtitle">为建筑行业提供全方位的技术支持</p>
        </div>

        <div class="services-grid">
          <div
            v-for="service in services"
            :key="service.id"
            class="service-card"
            @click="router.push(`/services/${service.slug}`)"
          >
            <div class="service-icon">
              <el-icon :size="40">
                <component :is="service.icon" />
              </el-icon>
            </div>
            <h3 class="service-title">{{ service.title }}</h3>
            <p class="service-description">{{ service.description }}</p>
            <div class="service-features">
              <el-tag
                v-for="feature in service.features"
                :key="feature"
                size="small"
                class="feature-tag"
              >
                {{ feature }}
              </el-tag>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- News Section -->
    <section class="news-section">
      <div class="container-box">
        <div class="section-header">
          <h2 class="section-title">最新资讯</h2>
          <el-button type="text" @click="router.push('/news')">
            查看更多 <el-icon><ArrowRight /></el-icon>
          </el-button>
        </div>

        <div class="news-grid">
          <div
            v-for="article in latestNews"
            :key="article.id"
            class="news-card"
            @click="router.push(`/news/${article.id}`)"
          >
            <div class="news-image">
              <el-image :src="article.image" :alt="article.title" fit="cover" lazy />
              <div class="news-date">{{ formatDate(article.date) }}</div>
            </div>
            <div class="news-content">
              <h3 class="news-title">{{ article.title }}</h3>
              <p class="news-summary">{{ article.summary }}</p>
              <div class="news-meta">
                <el-tag size="small" type="info">{{ article.category }}</el-tag>
                <span class="news-views">{{ article.views }} 浏览</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- Contact Section -->
    <section class="contact-section">
      <div class="container-box">
        <div class="contact-content">
          <div class="contact-info">
            <h2 class="section-title">联系我们</h2>
            <p class="contact-text">如有任何疑问或需求，欢迎随时联系我们</p>

            <div class="contact-items">
              <div class="contact-item">
                <el-icon><Location /></el-icon>
                <div>
                  <strong>地址</strong>
                  <p>山东省滨州市北外环与渤海二十一路交叉口，向南100米路东</p>
                </div>
              </div>

              <div class="contact-item">
                <el-icon><Phone /></el-icon>
                <div>
                  <strong>电话</strong>
                  <p><a href="tel:18954338600">18954338600（曹老师）</a></p>
                </div>
              </div>

              <div class="contact-item">
                <el-icon><Message /></el-icon>
                <div>
                  <strong>邮箱</strong>
                  <p>binjianjifu@163.com</p>
                </div>
              </div>
            </div>
          </div>

          <div class="contact-form">
            <el-form :model="contactForm" label-width="80px">
              <el-form-item label="姓名">
                <el-input v-model="contactForm.name" placeholder="请输入您的姓名" />
              </el-form-item>

              <el-form-item label="电话">
                <el-input v-model="contactForm.phone" placeholder="请输入您的联系电话" />
              </el-form-item>

              <el-form-item label="邮箱">
                <el-input v-model="contactForm.email" placeholder="请输入您的邮箱" />
              </el-form-item>

              <el-form-item label="留言">
                <el-input
                  v-model="contactForm.message"
                  type="textarea"
                  :rows="4"
                  placeholder="请输入您的留言内容"
                />
              </el-form-item>

              <el-form-item>
                <el-button type="primary" @click="submitContact">提交留言</el-button>
              </el-form-item>
            </el-form>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">
  import { useRouter } from 'vue-router';
  import { ElMessage } from 'element-plus';
  import {
    Location,
    Phone,
    Message,
    ArrowRight,
    Tools,
    Document,
    School,
    Trophy,
  } from '@element-plus/icons-vue';

  const router = useRouter();

  // 联系表单
  const contactForm = reactive({
    name: '',
    phone: '',
    email: '',
    message: '',
  });

  // 服务数据
  const services = [
    {
      id: 1,
      slug: 'consulting',
      title: '工程咨询',
      description: '提供专业的工程技术咨询服务，助力项目顺利实施',
      icon: 'Tools',
      features: ['技术评估', '方案设计', '质量监控'],
    },
    {
      id: 2,
      slug: 'training',
      title: '技能培训',
      description: '开展各类建筑技能培训，提升从业人员专业水平',
      icon: 'School',
      features: ['理论培训', '实操训练', '考试辅导'],
    },
    {
      id: 3,
      slug: 'certification',
      title: '资格认证',
      description: '协助办理各类建筑行业资格证书和认证服务',
      icon: 'Document',
      features: ['证书申请', '资料准备', '流程指导'],
    },
    {
      id: 4,
      slug: 'quality',
      title: '质量检测',
      description: '专业的工程质量检测和评估服务',
      icon: 'Trophy',
      features: ['质量检测', '安全评估', '合规审查'],
    },
  ];

  // 最新资讯数据
  const latestNews = ref([
    {
      id: 1,
      title: '2024年建筑行业新政策解读',
      summary: '详细解读最新的建筑行业政策变化，为企业发展提供指导...',
      image: '/src/assets/images/news1.jpg',
      date: new Date('2024-01-20'),
      category: '政策解读',
      views: 1234,
    },
    {
      id: 2,
      title: '智能建造技术发展趋势分析',
      summary: '探讨智能建造技术在现代建筑行业中的应用前景...',
      image: '/src/assets/images/news2.jpg',
      date: new Date('2024-01-18'),
      category: '技术前沿',
      views: 987,
    },
    {
      id: 3,
      title: '建筑安全管理最佳实践',
      summary: '分享建筑工程安全管理的成功案例和经验总结...',
      image: '/src/assets/images/news3.jpg',
      date: new Date('2024-01-15'),
      category: '安全管理',
      views: 756,
    },
  ]);

  // 格式化日期
  const formatDate = (date: Date) => {
    return new Intl.DateTimeFormat('zh-CN', {
      year: 'numeric',
      month: 'long',
      day: 'numeric',
    }).format(date);
  };

  // 提交联系表单
  const submitContact = () => {
    if (!contactForm.name || !contactForm.phone || !contactForm.message) {
      ElMessage.warning('请填写必要信息');
      return;
    }

    // 这里应该调用API提交表单
    ElMessage.success('留言提交成功，我们会尽快回复您！');

    // 清空表单
    Object.keys(contactForm).forEach((key) => {
      contactForm[key] = '';
    });
  };
</script>

<style lang="scss" scoped>
  .home-page {
    min-height: 100vh;
  }

  // Hero Section
  .hero-section {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 100px 0;

    .hero-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 40px;
        text-align: center;
      }
    }

    .hero-title {
      font-size: 3rem;
      font-weight: 700;
      margin-bottom: 20px;
      line-height: 1.2;

      @media (max-width: 768px) {
        font-size: 2rem;
      }
    }

    .hero-subtitle {
      font-size: 1.5rem;
      margin-bottom: 20px;
      opacity: 0.9;
    }

    .hero-description {
      font-size: 1.1rem;
      line-height: 1.6;
      margin-bottom: 40px;
      opacity: 0.8;
    }

    .hero-actions {
      display: flex;
      gap: 16px;

      @media (max-width: 768px) {
        justify-content: center;
      }

      .el-button {
        height: 48px;
        padding: 0 32px;
        font-size: 16px;
      }
    }

    .hero-image {
      .el-image {
        width: 100%;
        height: 400px;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      }
    }
  }

  // Services Section
  .services-section {
    padding: 100px 0;
    background: #f8f9fa;
  }

  .section-header {
    text-align: center;
    margin-bottom: 60px;

    .section-title {
      font-size: 2.5rem;
      color: #2c3e50;
      margin-bottom: 16px;
    }

    .section-subtitle {
      font-size: 1.2rem;
      color: #666;
    }
  }

  .services-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 30px;
  }

  .service-card {
    background: white;
    padding: 40px 30px;
    border-radius: 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e9ecef;

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
      border-color: var(--el-color-primary);
    }

    .service-icon {
      color: var(--el-color-primary);
      margin-bottom: 20px;
    }

    .service-title {
      font-size: 1.5rem;
      color: #2c3e50;
      margin-bottom: 16px;
    }

    .service-description {
      color: #666;
      line-height: 1.6;
      margin-bottom: 20px;
    }

    .service-features {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: center;

      .feature-tag {
        background: var(--el-color-primary-light-9);
        color: var(--el-color-primary);
        border: none;
      }
    }
  }

  // News Section
  .news-section {
    padding: 100px 0;

    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 60px;

      @media (max-width: 768px) {
        flex-direction: column;
        gap: 20px;
      }
    }
  }

  .news-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 30px;
  }

  .news-card {
    background: white;
    border-radius: 16px;
    overflow: hidden;
    cursor: pointer;
    transition: all 0.3s;
    border: 1px solid #e9ecef;

    &:hover {
      transform: translateY(-4px);
      box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1);
    }

    .news-image {
      position: relative;

      .el-image {
        width: 100%;
        height: 200px;
      }

      .news-date {
        position: absolute;
        top: 16px;
        right: 16px;
        background: rgba(0, 0, 0, 0.7);
        color: white;
        padding: 4px 12px;
        border-radius: 12px;
        font-size: 12px;
      }
    }

    .news-content {
      padding: 24px;

      .news-title {
        font-size: 1.3rem;
        color: #2c3e50;
        margin-bottom: 12px;
        line-height: 1.4;
      }

      .news-summary {
        color: #666;
        line-height: 1.6;
        margin-bottom: 16px;
      }

      .news-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .news-views {
          font-size: 12px;
          color: #999;
        }
      }
    }
  }

  // Contact Section
  .contact-section {
    padding: 100px 0;
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;

    .contact-content {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;

      @media (max-width: 768px) {
        grid-template-columns: 1fr;
        gap: 40px;
      }
    }

    .contact-text {
      font-size: 1.1rem;
      margin-bottom: 40px;
      opacity: 0.9;
    }

    .contact-items {
      display: flex;
      flex-direction: column;
      gap: 24px;
    }

    .contact-item {
      display: flex;
      align-items: flex-start;
      gap: 16px;

      .el-icon {
        font-size: 20px;
        margin-top: 4px;
        opacity: 0.8;
      }

      strong {
        display: block;
        margin-bottom: 4px;
        font-size: 1.1rem;
      }

      p {
        margin: 0;
        opacity: 0.8;
        line-height: 1.6;

        a {
          color: white;
          text-decoration: none;

          &:hover {
            text-decoration: underline;
          }
        }
      }
    }

    .contact-form {
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
      padding: 40px;
      border-radius: 16px;

      :deep(.el-form-item__label) {
        color: white;
      }

      :deep(.el-input__wrapper) {
        background: rgba(255, 255, 255, 0.9);
      }

      :deep(.el-textarea__inner) {
        background: rgba(255, 255, 255, 0.9);
      }
    }
  }
</style>
